<template>
  <div style="width:100%;padding-bottom:40px;padding-top:40px;">
    <div class="header">
     <div>
       <van-icon name="arrow-left" size="1.3rem" color="white" @click="back" />
       <span>商品详情</span>
     </div>
      <div style="margin-top:3px">
        <van-icon style="margin-right: 15px" name="cart" color="white" size="22" />
        <van-icon style="margin-right: 15px" name="weapp-nav" color="white" size="22" />
      </div>
    </div>
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
      <van-swipe-item v-for="img in banners" :key="img">
        <img :src="img" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <div style="display: flex; justify-content: space-between">
      <div class="title">黑美人西瓜鲜美多汁2个起卖</div>
      <div @click="showShare = true" style="color: rgb(196, 185, 185)">
        <van-icon size ="25" name="share" />
      </div>
    </div>
    <div class="line"></div>
    <div style="display: flex; color: #bcbab8; font-size: 10px; margin: 10px">
      <span style="flex: 1">2个以上</span>
      <span style="flex: 2">30个以上</span>
    </div>
    <div style="display: flex; margin: 8px">
      <div style="flex: 1">
        <span style="color: red">￥38.98</span>
        <span style="font-size: 10px; color: gray">/个</span>
      </div>
      <div style="flex: 2">
        <span style="color: red">￥38.88</span>
        <span style="font-size: 10px; color: gray">/个</span>
      </div>
    </div>
    <div style="font-size: 10px; color: #bcbab8; padding-left: 5px">
      <span style="display: inline-block; width: 33%">上架时间：2021-1-09</span>
      <span style="display: inline-block; width: 23%">浏览量：999</span>
      <span style="display: inline-block; width: 33%">7日内销量：99</span>
    </div>

    <div class="boldLine"></div>
    <!-- 身体 -->
    <div>
      <!-- //优惠 -->
      <div class="discount">
        <div
          style="
            flex: 1;
            font-size: 13px;
            font-weight: bold;
            margin-top: 10px;
            margin-left: 10px;
          "
        >
          优惠
        </div>
        <div class="discountDetail">
          <div
            style="display: flex; margin: 10px"
            @click="showPopup('showDiscount')"
          >
            <div style="flex: 1; color: #4bd863; font-size: 10px">
              优惠券领取
            </div>
            <div
              style="
                flex: 1;
                font-size: 10px;
                color: #4bd863;
                border: 1px solid #4bd863;
                text-align: center;
              "
            >
              满1999减50
            </div>
          </div>
          <div style="display: flex; margin: 10px">
            <div
              @click="showPopup('showOrderDiscount')"
              style="flex: 1; color: #4bd863; font-size: 10px"
            >
              订单优惠
            </div>
            <div
              @click="showPopup('showOrderDiscount')"
              style="flex: 1; font-size: 10px"
            >
              订单满3000打9.9折
            </div>
          </div>
          <div style="display: flex; margin: 10px">
            <div
              @click="showPopup('showSingleDiscount')"
              style="flex: 1; color: #4bd863; font-size: 10px"
            >
              单品优惠
            </div>
            <div
              @click="showPopup('showSingleDiscount')"
              style="flex: 1; font-size: 10px"
            >
              单品满1000打9.9折
            </div>
          </div>
          <div style="display: flex; margin: 10px">
            <div
              @click="showPopup('showFreeSend')"
              style="flex: 1; color: #4bd863; font-size: 10px"
            >
              免配送费
            </div>
            <div
              @click="showPopup('showFreeSend')"
              style="flex: 1; font-size: 10px"
            >
              满1000免配送费
            </div>
          </div>
        </div>
        <div
          @click="showPopup('showDiscount')"
          style="flex: 1; color: #4bd863; font-size: 10px; margin-top: 10px"
        >
          领券
        </div>
      </div>
      <div class="line"></div>
      <!-- 规格 -->
      <div @click="showPopup('showSpecs')" class="body">
        <div class="bodyTitle">规格</div>
        <div class="bodyItem">请选择产品规格</div>
      </div>
      <div class="line"></div>
      <!-- 属性 -->
      <div @click="showPopup('showAttr')" class="body">
        <div class="bodyTitle">属性</div>
        <div class="bodyItem">产品类别：水果 产地：西安 季节：夏季</div>
      </div>
      <div class="line"></div>
      <!-- 商品特色 -->
      <div @click="showPopup('showSpecial')" class="body">
        <div class="bodyTitle">商品特色</div>
        <div class="bodyItem">新品上新；掌柜推荐；销量冠军</div>
      </div>
      <div class="line"></div>
      <!-- 服务 -->
      <div @click="showPopup('showService')" class="body">
        <div class="bodyTitle">服务</div>
        <div class="bodyItem">查看店铺服务保障</div>
      </div>

      <div class="boldLine"></div>
      <!-- 评价模块 -->
      <div @click="commentClick"  class="comment">
        <div class="commentHeader">
          <div class="commentTitle">评价</div>
          <div class="commentStar">
            <van-rate color="#ffd21e" v-model="commentValue" readonly />
          </div>
          <div class="commentScribe">5星好评</div>
        </div>
        <div class="commentBody">
          商品保存非常好，发货及时，老板态度非常好，其中有个西瓜裂了，老板还给退了西瓜钱。值得信任！
        </div>
        <div class="commentFooter">
          <div class="commentSize">规格：独立包装(一个装)</div>
          <div class="commentCount">数量：5</div>
        </div>
      </div>
      <div class="boldLine"></div>
      <!-- 商店 -->
      <div class="store">
        <div class="storeHeader">
          <img
            style="flex: 1; margin-left: 3px"
            src="../../../assets/img/other/store.png"
            alt=""
          />
          <div class="storeDetail">
            <div style="font-size: 13px; font-weight: bold; color: #4bd863">
              剥壳者商铺
            </div>
            <div class="storeStar">
              <van-rate color="#ffd21e" v-model="storeValue" readonly />
            </div>
            <div class="goodsRate"></div>
          </div>
          <div
            style="flex: 1; color: #4bd863; font-size: 14px; margin-top: 25px"
          >
            进店
          </div>
        </div>
        <div class="storeFooter">
          <div class="storeFooterItem">
            <div class="storeFooterItemTitle">今日销量:</div>
            <span class="storeFooterItemValue">18</span>
          </div>
          <div class="storeFooterItem">
            <div class="storeFooterItemTitle">累计销量：</div>
            <div class="storeFooterItemValue">412</div>
          </div>
          <div class="storeFooterItem">
            <div class="storeFooterItemTitle">本月更新商品：</div>
            <div class="storeFooterItemValue">99</div>
          </div>
        </div>
      </div>
      <div class="boldLine"></div>
      <!-- 掌柜推荐 -->
      <div class="storeRecommend">
        <div class="storeRecommendHeader">
          <div
            style="
              width: 60px;
              margin-left: 40%;
              border-bottom: 1px solid #4bd863;
            "
          >
            掌柜推荐
          </div>
        </div>
        <div class="storeRecommendGoods">
          <div class="storeRecommendGoodsItem">
            <img
              src="../../../assets/img/other/recommend.png"
              style="position: absolute; top: 0;"
              alt=""
            />
            <img
              style="width: 150px; height: 145px"
              src="../../../assets/img/other/hotIcon.png"
              alt=""
            />
            <div class="storeRecommendGoodsItemTitle">
              黑美人西瓜鲜美多汁2个起卖

              <div style="color: red">
                ￥38.88<span style="color: black; margin-left: 5px"
                  >(起)/个</span
                >
              </div>
              <div
                style="
                  margin-left: 3px;
                  font-size: 10px;
                  color: rgb(196, 185, 185);
                "
              >
                销量：999
              </div>
            </div>
          </div>

          <div class="storeRecommendGoodsItem">
            <img
              src="../../../assets/img/other/recommend.png"
              style="position: absolute; top: 0;"
              alt=""
            />
            <img
              style="width: 150px; height: 145px"
              src="../../../assets/img/other/hotIcon.png"
              alt=""
            />
            <div class="storeRecommendGoodsItemTitle">
              黑美人西瓜鲜美多汁2个起卖

              <div style="color: red">
                ￥38.88<span style="color: black; margin-left: 5px"
                  >(起)/个</span
                >
              </div>
              <div
                style="
                  margin-left: 3px;
                  font-size: 10px;
                  color: rgb(196, 185, 185);
                "
              >
                销量：999
              </div>
            </div>
          </div>

        </div>

      </div>
      <div class="boldLine"></div>
<!--      商品详情-->
      <div class="storeRecommend">
        <div class="storeRecommendHeader">
          <div
              style="
              width: 60px;
              margin-left: 40%;
              border-bottom: 1px solid #4bd863;
            "
          >
            商品详情
          </div>
        </div>
        <img style="margin-left:13px;" src="../../../assets/img/other/goodsDetail.png" alt="">
        <img style="margin-left:13px;" src="../../../assets/img/other/goodsDetail.png" alt="">
        <img style="margin-left:13px;" src="../../../assets/img/other/goodsDetail.png" alt="">
        <img style="margin-left:13px;" src="../../../assets/img/other/goodsDetail.png" alt="">
      </div>
    </div>
    <!-- 底部商品导航栏 -->
    <div class="footer">
    <van-goods-action style="position: fixed; bottom: 0">
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    </div>
    <!-- 弹出层 -->
    <!-- 优惠券领取 -->
    <van-popup position="bottom" v-model="showDiscount">
      <div class="box">
        <div class="item">
          <div class="ticket">
            <div class="left">
              <div style="color: #fff; font-weight: bold; margin-top: 11px">
                ￥50
              </div>
              <div style="color: #fff">满1999减50</div>
            </div>
            <div class="right">
              <div style="font-weight: bold">店铺优惠券</div>
              <div>满1999减50</div>
              <div style="color: #4bd863">2021/02/03-2021-03-01</div>
            </div>
            <van-button
              size="small"
              color="#4bd863"
              style="
                border-radius: 5px;
                flex: 1;
                margin-left: 10px;
                margin-top: 10px;
              "
            >
              领取
            </van-button>
          </div>
        </div>
        <div class="item">
          <div class="ticket">
            <div class="left">
              <div style="color: #fff; font-weight: bold; margin-top: 11px">
                ￥50
              </div>
              <div style="color: #fff">满1999减50</div>
            </div>
            <div class="right">
              <div style="font-weight: bold">店铺优惠券</div>
              <div>满1999减50</div>
              <div style="color: #4bd863">2021/02/03-2021-03-01</div>
            </div>
            <van-button
              size="small"
              color="#4bd863"
              style="
                border-radius: 5px;
                flex: 1;
                margin-left: 10px;
                margin-top: 10px;
              "
            >
              领取
            </van-button>
          </div>
        </div>
        <van-button
          type="primary"
          block
          style="
            position: absolute;
            bottom: 0;
            left: 0;
            height: 30px;
            color: #fff;
            font-weight: bold;
            font-size: 10px;
          "
          >关闭</van-button
        >
      </div>
    </van-popup>
    <!-- 订单优惠 -->
    <van-popup position="bottom" v-model="showOrderDiscount">
      <div>
        <div class="popupHeader">
          <span>订单优惠</span>
        </div>
        <div class="popupContainer">
          <div class="popupContainerTitle">单笔订单满3000元，打9.9折</div>
          <div class="popupContainerTime">(2019/07/04-2019/08/01)</div>
        </div>
        <van-button
          type="primary"
          block
          style="height: 30px; color: #fff; font-weight: bold; font-size: 10px"
          >关闭</van-button
        >
      </div>
    </van-popup>
    <!-- 单品优惠 -->
    <van-popup position="bottom" v-model="showSingleDiscount">
      <div>
        <div class="popupHeader">
          <span>单品优惠</span>
        </div>
        <div class="popupContainer">
          <div class="popupContainerTitle">单笔订单满3000元，打9.9折</div>
          <div class="popupContainerTime">(2019/07/04-2019/08/01)</div>
        </div>
        <van-button
          type="primary"
          block
          style="height: 30px; color: #fff; font-weight: bold; font-size: 10px"
          >关闭</van-button
        >
      </div>
    </van-popup>
    <!-- 免配送费 -->
    <van-popup position="bottom" v-model="showFreeSend">
      <div>
        <div class="popupHeader">
          <span>免配送费</span>
        </div>
        <div class="popupContainer">
          <div class="popupContainerTitle">
            <div>商家配送；</div>
            <div>单笔订单满2999元，免配送费；</div>
            <div>配送范围：以商户为中心周围3公里为配送范围</div>
          </div>
          <div class="popupContainerTime">(2019/07/04-2019/08/01)</div>
        </div>
        <van-button
          type="primary"
          block
          style="height: 30px; color: #fff; font-weight: bold; font-size: 10px"
          >关闭</van-button
        >
      </div>
    </van-popup>

    <!-- 规格 -->
    <van-popup v-model="showSpecs" position="bottom" closeable>
      <div>
        <div class="specsBox">
          <div class="specsHeader">
            <img :src="hots" alt="" style="margin: 10px" />
            <div style="margin-top: 40px">
              <div style="font-size: 10px; font-weight: bold">
                黑美人西瓜鲜美多汁2个起卖
              </div>
              <div style="font-size: 10px; color: red">
                ￥38.88
                <span style="color: rgb(196, 185, 185)">(2个以上)</span>
              </div>
              <div style="font-size: 10px; color: red">
                ￥38.88
                <span style="color: rgb(196, 185, 185)">(2个以上)</span>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="specsBody">
            <div class="specsItem">
              <div>
                <div class="specsSize">独立包装(1个装)</div>
                <div class="specsPrice">￥38.92/个 库存：9999</div>
              </div>
              <div class="specsCount">
                <van-icon name="minus" />
                <div>1</div>
                <van-icon name="plus" />
              </div>
            </div>
            <div class="line"></div>

            <div class="specsItem">
              <div>
                <div class="specsSize">独立包装(1个装)</div>
                <div class="specsPrice">￥38.92/个 库存：9999</div>
              </div>
              <div class="specsCount">
                <van-icon name="minus" />
                <div>1</div>
                <van-icon name="plus" />
              </div>
            </div>
            <div class="line"></div>
            <div class="specsItem">
              <div>
                <div class="specsSize">独立包装(1个装)</div>
                <div class="specsPrice">￥38.92/个 库存：9999</div>
              </div>
              <div class="specsCount">
                <van-icon name="minus" />
                <div>1</div>
                <van-icon name="plus" />
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="specsFooter">
            <div class="specsTotal">
              <div>商品小计</div>
              <div style="color: red; font-weight: bold">￥388.8</div>
            </div>
            <div class="footerRight">
              <van-button
                style="
                  flex: 1;
                  color: #4bd863;
                  background: #c0eac8;
                  border: none;
                  height: 40px;
                "
                type="primary"
                >加入购物车</van-button
              >
              <van-button
                style="
                  flex: 1;
                  margin-left: 10px;
                  background: #4bd863;
                  height: 40px;
                "
                type="primary"
                >立即购买</van-button
              >
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 属性 -->
    <van-popup position="bottom" v-model="showAttr">
      <div>
        <div class="popupHeader">
          <span>商品属性</span>
        </div>
        <div>
          <div class="popupContainer" style="display: flex">
            <div>
              <span style="color: rgb(196, 185, 185); font-size: 10px"
                >产品类别</span
              >
              <span style="font-size: 10px; margin-left: 140px">水果</span>
            </div>
          </div>
          <div class="popupContainer" style="display: flex">
            <div>
              <span style="color: rgb(196, 185, 185); font-size: 10px"
                >产品类别</span
              >
              <span style="font-size: 10px; margin-left: 140px">水果</span>
            </div>
          </div>
        </div>
        <van-button
          type="primary"
          block
          style="height: 30px; color: #fff; font-weight: bold; font-size: 10px"
          >关闭</van-button
        >
      </div>
    </van-popup>
    <!-- 商品特色 -->
    <van-popup position="bottom" v-model="showSpecial">
      <div>
        <div class="popupHeader">
          <span>商品特色</span>
        </div>
        <div style="font-size: 10px">
          <div style="margin: 10px">新品上新</div>
          <div style="margin: 10px">新品上新</div>
          <div style="margin: 10px">新品上新</div>
        </div>
        <van-button
          type="primary"
          block
          style="height: 30px; color: #fff; font-weight: bold; font-size: 10px"
          >关闭</van-button
        >
      </div>
    </van-popup>
    <!-- 服务 -->
    <van-popup position="bottom" v-model="showService">
      <div>
        <div class="popupHeader">
          <span>服务保障</span>
        </div>
        <div class="line"></div>
        <div class="serviceBody">
          <div class="serviceItem">
            <div
              style="flex: 1; font-size: 10px; color: red; font-weight: bold"
            >
              12小时送达
            </div>
            <div style="flex: 2; font-size: 10px">
              该商家已经开通12小时送达，承诺支付成功后12小时内送达。
            </div>
          </div>
          <div class="line"></div>
          <div class="serviceItem">
            <div
              style="flex: 1; font-size: 10px; color: red; font-weight: bold"
            >
              12小时送达
            </div>
            <div style="flex: 2; font-size: 10px">
              该商家已经开通12小时送达，承诺支付成功后12小时内送达。
            </div>
          </div>
          <div class="line"></div>
          <van-button
            type="primary"
            block
            style="
              height: 30px;
              color: #fff;
              font-weight: bold;
              font-size: 10px;
            "
            >关闭</van-button
          >
        </div>
      </div>
    </van-popup>
    <!-- 分享弹出框 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "goodsDetail",
  data() {
    return {
      hots: [require("@/assets/img/other/hotIcon.png")],
      showDiscount: false,
      showOrderDiscount: false,
      showSingleDiscount: false,
      showFreeSend: false,
      showSpecs: false,
      commentValue: 5,
      storeValue: 5,
      showAttr: false,
      showSpecial: false,
      showService: false,
      showShare: false,
      banners: [
        require("@/assets/img/banner/banner.jpg"),
        require("@/assets/img/banner/banner2.jpg"),
      ],
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    commentClick(){
      this.$router.push('/comment')
    },
    back() {
      this.$router.back();
    },
    showPopup(type) {
      console.log(1);
      this[type] = true;
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style lang="less" scoped>
.storeRecommend {

  .storeRecommendHeader {

    font-size: 13px;
    color: #4bd863;
    font-weight: bold;
    height: 40px;
    line-height: 40px;

    border-bottom: 1px solid rgb(243, 240, 240);
  }
  .storeRecommendGoods {

    padding-left: 5%;
    .storeRecommendGoodsItem {
      position: relative;

      display: inline-block;
      width: 40%;
      margin: 10px;
      .storeRecommendGoodsItemTitle {
        padding: 4px;
        box-sizing: border-box;
        margin-top: -4px;
        width: 148px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 10px;
        border: 1px solid #bcbab8;
        border-top: none;
      }
    }
  }
}
.store {
  .storeHeader {
    display: flex;
    .storeDetail {
      flex: 6;
      padding-top: 12px;
      padding-left: 12px;
    }
  }
}
.storeFooter {
  display: flex;
  .storeFooterItem {
    color: #bcbab8;
    font-size: 10px;

    .storeFooterItemTitle {
      display: inline-block;
      margin-left: 15px;
    }
    .storeFooterItemValue {
      display: inline-block;
      color: red;
    }
  }
}
.boldLine {
  width: 100%;
  height: 10px;
  background: rgb(240, 233, 233);
  margin-top: 8px;
}
.serviceItem {
  display: flex;
  margin: 10px;
}
.specsBox {
  .specsHeader {
    display: flex;
  }
  .specsFooter {
    font-size: 10px;
    display: flex;
    background: #f2f2f2;
    .specsTotal {
      flex: 1;
      padding: 15px;
    }
    .footerRight {
      padding: 10px;
      flex: 2;
      display: flex;
    }
  }
  .specsBody {
    .specsItem {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      .specsCount {
        display: flex;
        div {
          margin-right: 10px;
          margin-left: 10px;
        }
      }
      .specsSize {
        font-size: 13px;
      }
      .specsPrice {
        font-size: 10px;
        color: gray;
      }
    }
  }
}
.header {
  justify-content: space-between;
  display: flex;
  z-index: 999;
  position: fixed;
  top:0;
  box-sizing: border-box;
  height: 40px;
  width: 100%;
  background: #4bd863;
  font-size: 17px;
  line-height: 40px;
  span {
    color: #fff;
    margin-left: 6px;
  }
}
.comment {
  .commentBody {
    font-size: 10px;
    margin-top: 10px;
    margin-left: 70px;
    margin-right: 70px;
  }
  .commentFooter {
    margin-top: 15px;
    font-size: 10px;
    color: #bcbab8;
    display: flex;
    .commentSize {
      margin-left: 70px;
    }
    .commentCount {
      margin-left: 15px;
    }
  }
  .commentHeader {
    display: flex;
    .commentStar {
      flex: 2;
      margin-top: 8px;
    }
    .commentTitle {
      font-size: 10px;
      font-weight: bold;
      margin-left: 10px;
      margin-top: 10px;
      flex: 1;
    }

    .commentScribe {
      margin-top: 10px;
      flex: 2;
      font-size: 10px;
    }
  }
}
.popupHeader {
  padding: 10px;
  text-align: center;
  font-size: 10px;
  color: #4bd863;
  border-bottom: 1px solid rgb(243, 240, 240);
}
.popupContainer {
  padding: 10px;

  border-bottom: 1px solid rgb(243, 240, 240);
  .popupContainerTitle {
    font-size: 10px;
  }
  .popupContainerTime {
    margin-top: 5px;
    font-size: 10px;
    color: #bcbab8;
  }
}
.body {
  display: flex;
  position: relative;
  .bodyTitle {
    flex: 1;
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px;
  }
  .bodyItem {
    flex: 4;
    font-size: 10px;
    margin: 10px;
  }
}
.line {
  width: 100%;
  height: 1px;
  background: rgb(243, 240, 240);
}
.title {
  padding: 5px;
  height: 20px;
  font-size: 10px;
  font-weight: bold;
}
.discount {
  display: flex;
  .discountDetail {
    flex: 4;
  }
}
.box {
  height: 200px;
  padding: 15px;

  .item {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
    // margin-left: 15px;
    // margin-right: 15px;
    .ticket {
      display: flex;

      .left {
        text-align: center;
        font-size: 15px;
        flex: 3;

        background: #4bd863;
      }
      .right {
        padding: 5px;
        text-align: center;
        border: 1px solid #4bd863;
        font-size: 10px;
        flex: 3;
      }
    }
  }
}
</style>
